<template>
    <div>
        <!-- 标题栏 -->
        <div class="nav">
            <div class="col1"><span>产品</span></div>
            <div class="col2"><span>门市价</span></div>
            <div class="col3"><span>官网价</span></div>
            <div class="col4"><span>数量</span></div>
        </div>
        <!-- 组件分割线 -->
        <el-divider></el-divider>
        <!-- 卡片内容 -->
        <div class="card" v-for="card in showingCard" :key="card.title">
            <div class="col1">
                <img class="main-img" v-bind:src="card.src">
                <div class="tishi">
                    <h4>{{card.title}}</h4>
                    <div class=" L2">
                        <ul>
                            <li>{{card.s+" ; "+card.b}}</li>
                        </ul>
                    </div>

                    <div class="yd">
                        <yuding>{{card.y}}</yuding>
                    </div>
                </div>
            </div>
            <div class="col2">
                <span>￥220</span>
            </div>
            <div class="col3">
                <span>￥220起</span>
            </div>
            <!-- 增加减少的按钮 -->
            <div class="btn col4">
                <span @click="jian">-</span>
                <span>{{ number }}</span>
                <span @click="jia">+</span>
            </div>
        </div>
    </div>
</template>
<script>
// 引入预定组件
import yuding from '../yuding.vue'
export default {
    props: ['item'],
    components: { yuding },
    data() {
        return {
            card1: [
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg", title: "成人票", s: "身份证入园", b: "有条件退", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg", title: "儿童长者票", s: "身份证入园", b: "有条件退", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg", title: "大学生门票", s: "身份证入园", b: "有条件退", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/191121919887.jpg", title: "自驾游车辆通行证", s: "身份证入园", b: "有条件退", y: "预定须知" },
            ],
            card2: [
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg", title: "成人年卡", s: "1111", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg", title: "双人年卡", s: "1111", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg", title: "儿童长者年卡", s: "1111", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg", title: "家庭年卡A", s: "1111", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg", title: "家庭年卡B", s: "1111", b: "不限次", y: "预定须知" },
            ],
            card3: [
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225745127.jpg", title: "2022礼品票", s: "激活使用", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg", title: "2022礼品卡 - 儿童长者年卡", s: "激活使用", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg", title: "2022礼品卡 - 成人年卡", s: "激活使用", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg", title: "2022礼品卡 - 双人年卡", s: "激活使用", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg", title: "2022礼品卡 - 家庭年卡A", s: "激活使用", b: "不限次", y: "预定须知" },
                { src: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg", title: "2022礼品卡 - 家庭年卡B", s: "激活使用", b: "不限次", y: "预定须知" },
            ],
            number: 0,

        }
    },
    computed: {
        showingCard() {
            if (this.item === 1) return this.card1
            if (this.item === 2) return this.card2
            if (this.item === 3) return this.card3
            return []
        }
    },
    methods: {
        jian() {
            if (this.number <= 0) {
                this.number = 0;
            } else {
                this.number--;
            }
        },
        jia() {
            this.number++;
        },
    }
}
</script>

<style lang="scss" scoped>
// 全局定义
ul {
    list-style: none;
}

.col1 {
    width: 50%;
    display: flex;
    margin-left: 40px;
}

.col2 {
    width: 15%;
}

.col3 {
    width: 15%;
}

.col4 {
    width: 20%;
}


.card .col2 span {
    font-size: 14px;
    color: gray;
    text-decoration: line-through;
}

.nav {
    display: flex;
}

//主页面
.card {
    display: flex;
    margin-top: 30px;

    .col1 .tishi {
        margin-left: 10px;
        line-height: 30px;
    }

    .main-img {
        height: 130px;
        width: 130px;
        border-radius: 10px;
    }

    .L2 {
        ul {
            // height: 13px;
            font-size: 12px;
            color: #528a3f;
            background: #f8fff8;
            border: 1px solid #afdf9a;
            padding: 2px 6px;
            margin-right: 6px;
            border-radius: 2px;
        }
    }

    .btn {
        width: 50px;
        height: 38px;
        line-height: 38px;
        margin-right: 5px;
        background: #eceff1;
        color: #202121;
        border-radius: 10px;
        padding: 0 12px;
        font-size: 18px;

        span {
            margin-right: 10px;
        }
    }
}
</style>